<template>
  <div>
    <table>
      <tr is='MyTr' v-for="(obj,index) in goodsArr" :key="index" :obj='obj'></tr>

    </table>
    <p>All Number:{{sum}}</p>
  </div>
</template>

<script>
  import MyTr from './components/maiguang'
  export default {
    data() {
      return {
        goodsArr: [{
            count: 0,
            goodsName: "Watermelon",
          },
          {
            count: 0,
            goodsName: "Banana",
          },
          {
            count: 0,
            goodsName: "Orange",
          },
          {
            count: 0,
            goodsName: "Pineapple",
          },
          {
            count: 0,
            goodsName: "Strawberry",
          },
        ],
      };
    },
    components: {
      MyTr
    },
    computed: {
      sum() {
        return this.goodsArr.reduce((sum, obj) => sum += obj.count * 1, 0)
      }

    }

  };
</script>